<template>
  <div>
    <el-container>
      <el-main>
         <div class="dept">
          <div class="xianshi">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>管理更改</el-breadcrumb-item>
          </el-breadcrumb>
          </div>
        </div>
        <!-- 显示列表头部，并获取数据 -->
        <el-card class="box-card">
        <el-table :data="tableData" height="550px" border style="width: 100%">
          <el-table-column prop="id" label="编号"> </el-table-column>
          <el-table-column prop="userName" label="用户名"> </el-table-column>
          <el-table-column prop="phone" label="用户电话"> </el-table-column>
          <el-table-column
            prop="userAction"
            label="用户级别"
            :formatter="StatusHandle"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="edit(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        </el-card>


       
       
      </el-main>
    </el-container>
    <!-- 修改权限 -->
    <div>
      <el-dialog width="400px" title="修改权限" :visible.sync="dialogeditFormVisible">
        <el-form :model="editform">
          <el-form-item label="编号">
            <el-input v-model="editform.id" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="用户名">
            <el-input v-model="editform.userName" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="用户电话">
            <el-input v-model="editform.phone" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="用户级别">
            <el-select v-model="editform.userAction" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogeditFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="deptDept"> 保存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "quanxian",
  data() {
    return {
      selected: "",
       options: [{
          value: 1,
          label: '运营商'
        },{
          value: 0,
          label: '用户'
        }],
        value: '',

      //显示
      tableData: [],
      dialogeditFormVisible: false,

      form: {
        phone: "",
        userPower: "",
        id: "",
        userName: "",
      },

      editform: {
        phone: "",
        userAction: "",
        userPower: "",
        id: "",
        userName: "",
      },
      //分页
      page: 1,
      limit: 10,
      pagecount: 0,
      count: 0,
    };
  },
  mounted: function() {
    this.getDeptList();
  },
  methods: {
//重置
 resetting: function() {
      this.$router.go(0);
    },
   
    // 显示
    getDeptList: function() {
      this.$axios
        .get("api/check/selectByAction", {
          params: {
            limit: 10,
            page: 1,
          },
        })
        .then((res) => {
          let result = res.data;

          if (result.code == 200) {
            console.log(result);
            this.tableData = result.data;

            this.count = result.count;
          } else {
            this.$alert(result.msg);
          }
        })
        .catch(() => {});
    },
    //修改等级
     StatusHandle: function(row, column) {
      const userAction = row.userAction;
      if (userAction == 0) {
        return "用户";
      } else if (userAction == 1) {
        return "运营商";
      }  else {
        return "删除";
      }
    },
    edit: function(obj) {
      this.dialogeditFormVisible = true;
      this.editform.id = obj.id;
      this.editform.userPower = obj.userPower;
      this.editform.userAction = obj.userAction;
      this.editform.phone = obj.phone;
      this.editform.userName = obj.userName;
      
    },

    deptDept: function() {
      this.$axios
        .post(
          "/api/check/updateById",
          this.$qs.stringify({
            id: this.editform.id,
            userAction: this.editform.userAction,
          })
        )
        .then((res) => {
          let result = res.data;

          if (result.msg == "修改成功") {
            this.$alert(result.msg);
            this.fengye();
            this.$router.go(0);
          } else {
            this.$alert(result.msg);
          }
        })
        .catch(() => {
          this.$alert("请求出错");
        });
    },

    //分页
    fengye: function(e) {
      this.page = e;
      this.$axios
        .get("/api/user/selectForPag", {
          params: {
            limit: 10,
            page: 1,
          },
        })
        .then((res) => {
          let result = res.data;
       
          if (result.code == 200) {
            this.tableData = [];
            this.tableData = result.data;
          } else {
            this.$alert(result.msg);
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.box-card {
  margin: 10px 0px;
  text-align: left;
}
.el-main {
  margin: 0;
  padding: 0;
}
</style>